<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>python实现C语言在线编译器</title>
    <link rel="stylesheet" href="view/lib/bootstrap-3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="view/lib/codemirror/lib/codemirror.css">
    <script type="text/javascript" src="view/lib/codemirror/lib/codemirror.js"></script>
    <script src="view/lib/codemirror/addon/edit/matchbrackets.js"></script>
    <script src="view/lib/codemirror/addon/hint/show-hint.js"></script>
    <link rel="stylesheet" href="view/lib/codemirror/addon/hint/show-hint.css">
    <script src="view/lib/codemirror/mode/clike/clike.js"></script>
    <link rel="stylesheet" href="view/css/index.css">
</head>
<body>
    <div class="head">
        <div class="container">
            C语言在线编译器
        </div>
    </div>
    <div class="main">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                  <div class="panel panel-default">
                  <div class="panel-heading">
                      <button type="button" class="btn btn-default">源代码:</button>
                      <button type="button" class="btn btn-primary pull-right" id="run-btn">run</button>
                  </div>
                  <div class="panel-body left-panel-body">
                      <textarea name="" id="code" ></textarea>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="panel panel-default">
                  <div class="panel-heading"><button type="button" class="btn btn-default">运行结果：</button></div>
                  <div class="panel-body" id="run-res">

                  </div>
                </div>
              </div>

            </div>
        </div>
    </div>
<script type="text/javascript" src="view/lib/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="view/lib/bootstrap-3.4.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
            mode: "text/x-csrc",
            lineNumbers: true,
            tabSize:4,
            matchBrackets: true, // 括号匹配
            styleActiveLine: true,
            lineWrapping:true,  // 代码折行
            extraKeys: {"Ctrl-Space":"autocomplete"}      //ctrl-space唤起自动提示
          });

        $("#run-btn").click(function(){
            var content = editor.getValue();
            if(!content) return;
            $.ajax({
                url:'/compiler/',
                type:"post",
                data:content,
                contentType:'text/plain',
                success(res){
                    $("#run-res").html(res);
                }
            })
        })
    </script>
</body>
</html>